<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米账号登录</title>
  <link rel="stylesheet" href="./css/mi-login.css">
</head>

<body>
  <div class="jacket">
    <header>
      <div class="box">
        <!-- 语言翻译和帮助 -->
        <div class="language">中文(简体) ﹀</div>
        <div class="help">帮助</div>
      </div>
      <!-- 标题 -->
      <h4>小米账号登录</h4>
      <div class="logo"><a href="./homepage1.html"><img src="./img/logo.png" alt="首页"></a></div>
      <p class="text">让每个人都能享受科技的乐趣</p>
    </header>
    <!------------------->
    <main>
      <!-- 账号和密码 -->
      <div class="login">
        <input type="text" id="username" placeholder="邮箱/手机号码/小米ID">
        <div class="error-message" id="username-error"></div>
      </div>
      <div class="login">
        <input type="password" id="password" placeholder="请输入密码">
        <div class="error-message" id="password-error"></div>
        <div>👁️
          <!-- <img src="./img/logo.png" alt=""> -->
        </div>
      </div>

      <!-- 协议 -->
      <div class="agreement">
        <label>
          <input type="checkbox" id="agreement">
          <p> 已阅读并同意小米账号 <a href="#">用户协议</a>和<a href="#">隐私政策</a></p>
          <div class="error-message" id="agreement-error"></div>
        </label>
      </div>
      <!-- 登录按钮 -->
      <button id="loginButton" disabled>登录</button>
      <!-- 其他登录方式 -->
      <p class="jump">
        <a href="#">手机号登录</a> |
        <a href="#">立即注册</a> |
        <a href="#">忘记密码？</a>
      </p>
    </main>
  </div>
  <script src="js/login.js"></script>
</body>

</html>